/**
 * @Author:周邱艳
 * @Date:2020/6/30
 * @Description:这是首页的走马灯
 */
import React,{Component} from "react";
import { Carousel, WingBlank,Toast } from 'antd-mobile';
import banner1 from "../../../access/images/1.jpg"
import banner2 from "../../../access/images/2.jpg"
import banner3 from "../../../access/images/3.jpg"

export default class HomeCarousel extends Component{
    state = {
        data: ['1', '2', '3'],
        imgHeight: 176,

    }
    componentDidMount() {
        // simulate img loading
        setTimeout(() => {
            this.setState({
                data: ['1', '2', '3'],

            });
        }, 100);
    }
    render() {
        return (


            <Carousel

                dragging={false}
                swiping={false}
                autoplay
                infinite
            >
                {this.state.data.map(val => (
                    <a
                        key={val}

                        style={{ display: 'inline-block',width:"100%" ,height: this.state.imgHeight ,touchAction:"pan-y"}}
                    >
                        <img
                            src={require(`../../../access/images/${val}.jpg`)}
                            alt=""
                            style={{ width: "100%",height:"17rem", verticalAlign: 'top'}}
                            onLoad={() => {
                                // fire window resize event to change height
                                window.dispatchEvent(new Event('resize'));
                                this.setState({ imgHeight: 'auto' });
                            }}
                        />
                    </a>
                ))}
            </Carousel>
        );
    }
}

